<template>
	<view class="register-page">
		<!-- 标题 -->
		<view class="page-header">
			<text class="page-title">用户注册</text>
			<text class="page-subtitle">加入校园平台，开启精彩生活</text>
		</view>

		<!-- 注册表单 -->
		<view class="register-form">
			<up-form ref="formRef" :model="formData" :rules="rules">
				<!-- 用户名 -->
				<up-form-item label="用户名" prop="uname" required>
					<up-input v-model="formData.uname" placeholder="请输入用户名（6-20位）" border="surround"
						:clearable="true"></up-input>
				</up-form-item>

				<!-- 密码 -->
				<up-form-item label="密码" prop="password" required>
					<up-input v-model="formData.password" type="password" placeholder="请输入密码（至少6位）" border="surround"
						:clearable="true"></up-input>
				</up-form-item>

				<!-- 确认密码 -->
				<up-form-item label="确认密码" prop="confirmPassword" required>
					<up-input v-model="formData.confirmPassword" type="password" placeholder="请再次输入密码"
						border="surround" :clearable="true"></up-input>
				</up-form-item>

				<!-- 昵称 -->
				<up-form-item label="昵称" prop="nickname" required>
					<up-input v-model="formData.nickname" placeholder="请输入昵称" border="surround"
						:clearable="true"></up-input>
				</up-form-item>

				<!-- 手机号 -->
				<up-form-item label="手机号" prop="phoneNumber" required>
					<up-input v-model="formData.phoneNumber" type="number" placeholder="请输入手机号" border="surround"
						:clearable="true"></up-input>
				</up-form-item>

				<!-- 学号/工号 -->
				<up-form-item label="学号" prop="serialNumber" required>
					<up-input v-model="formData.serialNumber" placeholder="请输入学号/工号" border="surround"
						:clearable="true"></up-input>
				</up-form-item>

				<!-- 学院 -->
				<up-form-item label="学院" prop="college" required>
					<up-input v-model="formData.college" placeholder="请输入所在学院" border="surround"
						:clearable="true"></up-input>
				</up-form-item>

				<!-- 专业 -->
				<up-form-item label="专业" prop="major" required>
					<up-input v-model="formData.major" placeholder="请输入专业" border="surround"
						:clearable="true"></up-input>
				</up-form-item>
			</up-form>

			<!-- 用户协议 -->
			<view class="agreement-section">
				<up-checkbox v-model:checked="agreedToTerms" usedAlone shape="circle" activeColor="#36d399">
					我已阅读并同意
				</up-checkbox>
				<text class="agreement-link" @click="handleShowAgreement">《用户协议》</text>
				<text>和</text>
				<text class="agreement-link" @click="handleShowPrivacy">《隐私政策》</text>
			</view>

			<!-- 注册按钮 -->
			<up-button type="primary" :loading="loading" @click="handleRegister" class="register-btn"
				color="#36d399">立即注册</up-button>

			<!-- 返回登录 -->
			<view class="login-section">
				<text class="login-hint">已有账号？</text>
				<text class="login-link" @click="handleGoLogin">立即登录</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		register
	} from '../../server/api/auth.js';
	import showToast from '../../utils/showToast.js';

	// 表单数据
	const formData = reactive({
		uname: '',
		password: '',
		confirmPassword: '',
		nickname: '',
		phoneNumber: '',
		serialNumber: '',
		college: '',
		major: ''
	});

	// 表单验证规则
	const rules = {
		uname: [{
				required: true,
				message: '请输入用户名',
				trigger: ['blur', 'change']
			},
			{
				min: 6,
				max: 20,
				message: '用户名长度在6-20位之间',
				trigger: ['blur', 'change']
			},
			{
				pattern: /^[a-zA-Z0-9_]+$/,
				message: '用户名只能包含字母、数字和下划线',
				trigger: ['blur', 'change']
			}
		],
		password: [{
				required: true,
				message: '请输入密码',
				trigger: ['blur', 'change']
			},
			{
				min: 6,
				message: '密码长度不能少于6位',
				trigger: ['blur', 'change']
			}
		],
		confirmPassword: [{
				required: true,
				message: '请再次输入密码',
				trigger: ['blur', 'change']
			},
			{
				validator: (rule, value, callback) => {
					if (value !== formData.password) {
						callback(new Error('两次输入的密码不一致'));
					} else {
						callback();
					}
				},
				trigger: ['blur', 'change']
			}
		],
		nickname: [{
				required: true,
				message: '请输入昵称',
				trigger: ['blur', 'change']
			},
			{
				min: 2,
				max: 20,
				message: '昵称长度在2-20位之间',
				trigger: ['blur', 'change']
			}
		],
		phoneNumber: [{
				required: true,
				message: '请输入手机号',
				trigger: ['blur', 'change']
			},
			{
				pattern: /^1[3-9]\d{9}$/,
				message: '请输入正确的手机号',
				trigger: ['blur', 'change']
			}
		],
		serialNumber: [{
			required: true,
			message: '请输入学号/工号',
			trigger: ['blur', 'change']
		}],
		college: [{
			required: true,
			message: '请输入所在学院',
			trigger: ['blur', 'change']
		}],
		major: [{
			required: true,
			message: '请输入专业',
			trigger: ['blur', 'change']
		}]
	};

	// 状态
	const formRef = ref(null);
	const loading = ref(false);
	const agreedToTerms = ref(false);

	/**
	 * 处理注册
	 */
	const handleRegister = async () => {
		console.log(agreedToTerms.value);
		// 检查是否同意协议
		if (!agreedToTerms.value) {
			showToast('请同意用户协议和隐私政策', 'none');
			return;
		}

		// 表单验证
		try {
			await formRef.value.validate();
		} catch (errors) {
			console.log('表单验证失败:', errors);
			return;
		}

		loading.value = true;

		try {
			// 准备注册数据
			const registerData = {
				uname: formData.uname,
				password: formData.password,
				nickname: formData.nickname,
				phoneNumber: formData.phoneNumber,
				serialNumber: formData.serialNumber,
				college: formData.college,
				major: formData.major
			};

			// 调用真实注册接口
			const res = await register(registerData);

			if (res.code === 200) {
				showToast('注册成功，即将跳转登录页', 'success');

				// 延迟跳转
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			} else {
				showToast(res.message || '注册失败', 'error');
			}
		} catch (error) {
			console.error('注册异常:', error);
			showToast(error.message || '网络错误，请稍后重试', 'error');
		} finally {
			loading.value = false;
		}
	};

	/**
	 * 返回登录页
	 */
	const handleGoLogin = () => {
		uni.navigateBack();
	};

	/**
	 * 显示用户协议
	 */
	const handleShowAgreement = () => {
		showToast('用户协议功能开发中', 'none');
	};

	/**
	 * 显示隐私政策
	 */
	const handleShowPrivacy = () => {
		showToast('隐私政策功能开发中', 'none');
	};
</script>

<style lang="scss" scoped>
	.register-page {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 40rpx 40rpx 80rpx;
	}

	// 页面头部
	.page-header {
		text-align: center;
		margin-bottom: 60rpx;

		.page-title {
			display: block;
			font-size: 48rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 20rpx;
		}

		.page-subtitle {
			font-size: 26rpx;
			color: #999999;
		}
	}

	// 注册表单
	.register-form {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 50rpx 40rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

		/* #ifdef H5 */
		:deep(.u-form-item) {
			margin-bottom: 30rpx;
		}

		:deep(.u-form-item__body__left__content__label) {
			font-size: 28rpx;
			color: #333333;
			font-weight: 500;
		}
		/* #endif */
		
		/* #ifndef H5 */
		// 小程序端使用全局样式覆盖
		.u-form-item {
			margin-bottom: 30rpx !important;
		}

		.u-form-item__body__left__content__label {
			font-size: 28rpx !important;
			color: #333333 !important;
			font-weight: 500 !important;
		}
		/* #endif */
	}

	// 用户协议区域
	.agreement-section {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		font-size: 24rpx;
		color: #666666;
		flex-wrap: wrap;

		.agreement-link {
			color: #36d399;
			margin: 0 8rpx;
		}
	}

	// 注册按钮
	.register-btn {
		width: 100%;
		height: 90rpx;
		border-radius: 45rpx;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	// 登录区域
	.login-section {
		text-align: center;

		.login-hint {
			font-size: 26rpx;
			color: #999999;
			margin-right: 10rpx;
		}

		.login-link {
			font-size: 26rpx;
			color: #36d399;
			font-weight: bold;
		}
	}
</style>

